<script setup>
import { deepCopy } from '/@/utils';
import { usePic } from '/@/views/product/cate/hook';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
import Editor from '/@/components/common/editor/Editor.vue';

const props = defineProps({
	modelValue: {
		type: Array,
		default: () => [],
	},
});
const emit = defineEmits(['update:modelValue']);
const title = computed(() => (isAdd.value ? '新增' : '修改') + '产品概述');
const tableData = computed(() => props.modelValue);
const isAdd = ref(false);
const editIndex = ref(-1);
const addDialogVisible = ref(false);

const toAdd = () => {
	addDialogVisible.value = true;
	editIndex.value = -1;
	isAdd.value = true;
};
const ruleForm = ref({});
const toEdit = (row, index) => {
	addDialogVisible.value = true;
	editIndex.value = index;
	ruleForm.value = deepCopy(row);
	isAdd.value = false;
};
const delItem = (index) => {
	tableData.value.splice(index, 1);
	emit('update:modelValue', tableData.value);
};
const toSave = () => {
	console.log(ruleForm.value);
	if (isAdd.value) {
		tableData.value.push(ruleForm.value);
	} else {
		tableData.value.splice(editIndex.value, 1, ruleForm.value);
	}
	ruleForm.value = {};
	addDialogVisible.value = false;
	emit('update:modelValue', tableData.value);
};
const { isShowPicSelector, selectPic, getPic } = usePic(ruleForm);
</script>
<template>
	<div class="ProductOverview">
		<el-button type="primary" @click="toAdd" style="margin-bottom: 10px">新增产品说明</el-button>
		<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" border>
			<!-- <el-table-column label="图标">
				<template #default="scope">
					<Img :src="scope.row.icon" style="width: 40px; height: 40px"></Img>
				</template>
			</el-table-column> -->
			<el-table-column prop="name" label="名称"> </el-table-column>
			<el-table-column label="操作" width="180px">
				<template #default="scope">
					<el-button size="small" type="warning" @click="toEdit(scope.row, scope.$index)">编辑</el-button>
					<el-popconfirm title="确定删除吗？" @confirm="delItem(scope.$index)">
						<template #reference>
							<el-button size="small" type="danger">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog :close-on-click-modal="false" :title="title" destroy-on-close v-model="addDialogVisible" width="80%">
			<el-form :model="ruleForm" ref="formRef" label-width="70px">
				<el-form-item label="名称" prop="name">
					<el-input show-word-limit maxlength="200" v-model="ruleForm.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="说明" prop="icon">
					<Editor v-model="ruleForm.icon1" editId="description" />
					<!-- <span @click="selectPic" style="cursor: pointer">
						<Img :src="ruleForm.icon" width="100px" height="100px" />
					</span> -->
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="toSave">添加至列表</el-button>
				</span>
			</template>
		</el-dialog>
		<PictureSelectorDialog v-model="isShowPicSelector" :maxLength="1" @submit="getPic" />
	</div>
</template>

<style lang="scss" scoped>
.ProductOverview {
}
</style>
